<template>
  <div class="user-list-container">
    <el-card class="user-card">
      <div slot="header" class="card-header">
        <h2>用户信息列表</h2>
        <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="fetchUsers"
            :loading="refreshing"
            size="mini"
        >
          刷新
        </el-button>
      </div>

      <el-table
          :data="users"
          border
          stripe
          highlight-current-row
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
      >
        <el-table-column
            prop="user_id"
            label="用户ID"
            width="80"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="username"
            label="用户名"
            width="120"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="nickname"
            label="昵称"
            width="120"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            width="140"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            min-width="180"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="is_active"
            label="状态"
            width="100"
            align="center"
        >
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.is_active === 1 ? 'success' : 'danger'"
            >
              {{ scope.row.is_active === 1 ? '活跃' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="created_time"
            label="创建时间"
            min-width="180"
            align="center"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.created_time) }}
          </template>
        </el-table-column>
      </el-table>

      <div v-if="users.length === 0 && !loading" class="empty-state">
        <el-empty description="暂无用户数据"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  data() {
    return {
      users: [],
      loading: false,
      refreshing: false
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      this.loading = true
      this.refreshing = true
      try {
        const response = await this.$http.get('/selectUser')
        // 后端直接返回Result对象，数据在response.data中
        if (response.code === 200) {
          this.users = response.data
        } else {
          this.$message.error('获取用户列表失败: ' + response.msg)
        }
      } catch (error) {
        this.$message.error('网络错误，无法获取用户列表')
        console.error(error)
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString()
    }
  }
}
</script>

<style scoped>
.user-list-container {
  padding: 20px;
  animation: fadeIn 0.5s ease-out;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.empty-state {
  margin: 50px 0;
  text-align: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>